<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs @change="(val)=>{$router.push({name:val})}" activeKey="MchApply">
        <a-tab-pane key="MchList" tab="商户列表"> </a-tab-pane>
        <a-tab-pane key="MchApply" tab="入驻审核"> </a-tab-pane>
        <a-tab-pane key="MchCommotCat" tab="所售类目"> </a-tab-pane>
        <a-tab-pane key="MchGoods" tab="入驻商品"> </a-tab-pane>
        <a-tab-pane key="MchOrder" tab="入驻订单"> </a-tab-pane>
        <a-tab-pane key="MchCashList" tab="提现申请"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline" >
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-input-search style="width: 100%" placeholder="请填写商品名称" v-model="queryParam.search_key" />
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button style="margin-right: 8px" @click="() => (this.queryParam = {})">重置</a-button>
                <a-button type="primary" @click="$refs.tableList.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card style="margin-top: 11px" :bordered="false" class="card_style_re">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options" :defaultValue="0"></NoBorderRadio>
      </div>
      <a-divider />
      <s-table ref="tableList" size="default" row-key="id" :columns="columns" :data="loadData">
        <template slot="name" slot-scope="name, record">
          <a-row>
            <a-space size="small">
              <a-space>
                <img :src="record.logo" style="width: 50px; height: 50px;border-radius:5px" alt="" />
              </a-space>
              <div>
                <div>{{ name }}</div>
                <div v-for="cat in commonCat" :key="cat.id + ''">
                  <div v-if="cat.id == record.mch_common_cat_id">所售类目:{{ cat.name }}</div>
                </div>
              </div>
            </a-space>
          </a-row>
        </template>
        <template slot="user" slot-scope="user, mch">
          <a-row type="flex" align="middle">
            <a-space>
              {{ mch.name||'' }}
            </a-space>
          </a-row>
          <a-row v-if="mch.platform == 0" type="flex" align="middle">
            <a-space> 微信 </a-space>
          </a-row>
          <a-row v-if="mch.platform == 1" type="flex" align="middle">
            <a-space> 支付宝 </a-space>
          </a-row>
          <a-row v-if="mch.platform == 2" type="flex" align="middle">
            <a-space> 公众号 </a-space>
          </a-row>
        </template>
        <template slot="realname" slot-scope="realname, mch">
          <a-row type="flex" align="middle">
            <a-space>
              {{ realname }}
            </a-space>
            <a-space style="margin-left: 10px"> tel:{{ mch.tel }} </a-space>
          </a-row>
        </template>
        <!-- <template slot="created_at" slot-scope="created_at">
          <a-row type="flex" align="middle">
            <a-space>
              {{ created_at | timeFormat }}
            </a-space>
          </a-row>
        </template> -->
        <a-space slot="action" slot-scope="text, mch">
          <!-- <a-button size="small" title="编辑" @click="onEdit(mch)">审核</a-button> -->
          <a class="ant-dropdown-link" @click="onEdit(mch)">审核</a>
        </a-space>
      </s-table>
    </a-card>
    <a-drawer title="编辑入驻商" :width="720" @close="onClose" :destroyOnClose="true" :visible="visible">
      <template>
        <a-form action="" method="post" @submit="onSave" :form="form">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="基础设置">
              <a-form-item :hidden="true">
                <a-input v-decorator="['id']" type="number" :step="1" />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户ID">
                <a-input
                  placeholder="用户id"
                  disabled
                  type="number"
                  :value="mchInfo.user_id"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商户名称">
                <a-input
                  placeholder="填写商户名称"
                  disabled
                  :value="mchInfo.name"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所售类目">
                <a-select
                  disabled
                  placeholder="请选择类目"
                  :default-value="mchInfo.mch_common_cat_id"
                >
                  <a-select-option v-for="(cat, index) of commonCat" :key="index" :value="cat.id">
                    {{ cat.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人">
                <a-input
                  placeholder="填写联系人"
                  disabled
                  :value="mchInfo.realname"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
                <a-input
                  placeholder="填写联系电话"
                  disabled
                  :value="mchInfo.tel"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="微信号">
                <a-input
                  placeholder="填写微信号"
                  disabled
                  :value="mchInfo.wechat_name"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="省市区">
                <Address v-model="addressInfo"></Address>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="详细地址">
                <a-input
                  disabled
                  placeholder="填写详细地址"
                  :value="mchInfo.address"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客服电话">
                <a-input
                  disabled
                  placeholder="填写客服电话"
                  :value="mchInfo.service_tel"
                  type="text"
                  :step="1"
                />
              </a-form-item>
              <a-form-item
                help="商户每笔订单交易金额扣除的手续费，请填写0~1000范围的整数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="手续费(千分之)"
                hasFeedback
              >
                <a-input
                  placeholder="填写手续费"
                  v-decorator="['transfer_rate', { rules: [{ required: true, message: '填写手续费' }] }]"
                  type="number"
                  :step="1"
                />
              </a-form-item>
              <a-form-item
                help="升序，数字越小排的越靠前"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="排序"
                hasFeedback
              >
                <a-input
                  placeholder="填写排序"
                  v-decorator="['sort', { rules: [{ required: true, message: '填写排序' }] }]"
                  type="number"
                  :step="1"
                />
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审核状态">
                <a-radio-group v-decorator="['review_status']">
                  <a-radio value="0"> 待审核 </a-radio>
                  <a-radio value="1"> 审核通过 </a-radio>
                  <a-radio value="2"> 不通过 </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="不通过理由">
                <a-input placeholder="填写不通过理由" v-decorator="['review_result']" type="text" />
              </a-form-item>
            </a-tab-pane>
            <a-tab-pane key="2" tab="图片设置">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="店铺Logo" hasFeedback>
                <img :src="mchInfo.logo" style="height: 100px;width: auto">
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="店铺背景（顶部）" hasFeedback>
                <img :src="mchInfo.header_bg" style="height: 100px;width: auto">
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="营业执照" hasFeedback>
                <img :src="mchInfo.business" style="height: 100px;width: auto">
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份证正面" hasFeedback>
                <img :src="mchInfo.card_front" style="height: 100px;width: auto">
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份证反面" hasFeedback>
                <img :src="mchInfo.card_obverse" style="height: 100px;width: auto">
              </a-form-item>
            </a-tab-pane>
          </a-tabs>
          <a-form-item :gutter="[16, 30]" type="flex" align="middle">
            <a-col offset="4">
              <a-button type="primary" html-type="submit"> 保存 </a-button>
            </a-col>
          </a-form-item>
        </a-form>
      </template>
    </a-drawer>
  </page-header-wrapper>
</template>

<script>
import { list, save, upDown, apply } from '@/api/mch/mch'
import { STable, Address } from '@/components'
import pick from 'lodash.pick'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '用户',
    dataIndex: 'user',
    scopedSlots: { customRender: 'user' }
  },
  {
    title: '联系人',
    dataIndex: 'realname',
    scopedSlots: { customRender: 'realname' }
  },
  // {
  //   title: '入驻时间',
  //   dataIndex: 'created_at',
  //   scopedSlots: { customRender: 'created_at' }
  // },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'MchList',
  components: {
    STable,
    Address,
    NoBorderRadio
  },
  data () {
    return {
      queryParam: {
        review_status: 0
      },
       options: [
        {
          title: '待审核',
          value: 0
        },
        {
          title: '审核通过',
          value: 1
        },
        {
          title: '未通过',
          value: 2
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      columns: columns,
      visible: false,
      form: this.$form.createForm(this),
      mchInfo: {},
      addressInfo: {},
      commonCat: [],
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return list(parameter).then((res) => {
          this.commonCat = res.data.common_cat
          return res.data
        })
      }
    }
  },
  activated () {
    this.$refs.tableList.$data.localDataSource = []
    this.$refs.tableList.refresh(false)
  },
  created () {},
  watch: {
  },
  methods: {
     onOptionChange (val) {
      this.queryParam.review_status = val
      this.$refs.tableList.refresh()
    },
    refresh (row) {
      this.$nextTick(() => {
        this.$refs.tableList.refresh(true)
      })
    },
    onEdit (mch) {
      this.visible = true
      this.mchInfo = mch
      this.updateData()
    },
    /**
     * 渲染form表单
     */
    updateData () {
      this.addressInfo = {
        province_id: this.mchInfo.province_id,
        city_id: this.mchInfo.city_id,
        district_id: this.mchInfo.district_id
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.mchInfo, [
            'id',
            'sort',
            'name',
            'realname',
            'tel',
            'name',
            'address',
            'mch_common_cat_id',
            'service_tel',
            'logo',
            'header_bg',
            'transfer_rate',
            'wechat_name',
            'business',
            'card_front',
            'card_obverse',
            'user_id',
            'review_status',
            'review_result'
          ])
        )
      })
    },
    onClose () {
      this.visible = false
      this.addressInfo = {}
      this.mchInfo = {}
    },
    onSave (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var newObj = {}
          Object.assign(newObj, values, this.addressInfo)
          this.$message.loading({ content: '提交中', key: 'updatable' })
          apply(newObj).then((res) => {
            if (res.code === 0) {
              this.$message.success({ content: res.msg, key: 'updatable' })
              this.$nextTick(() => {
                this.refresh()
                this.visible = false
              })
            } else {
              this.$message.error({ content: res.msg, key: 'updatable' })
            }
          })
        } else {
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },
    onConfirmStatus (type, id) {
      upDown({ id: id, type: type }).then((res) => {
        if (res.code === 0) {
          this.refresh()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
</style>
